<template>
  <div class="student-update">
    <el-button icon="el-icon-arrow-left" @click="$router.push('/student')" circle></el-button>
    <!-- status-icon 当表单校验不通过时, 输入框右侧有个 x 小图标 -->
    <el-form status-icon ref="studentFormRef" :model="updateStudent" label-width="100px" label-position="right"
      style="width: 100%; height: 100%" :rules="rules" class="update-form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="updateStudent.name" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="updateStudent.gender" class="filter-item" placeholder="请点击选择" width="600px">
          <el-option v-for="option in genderOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所在学校" prop="school">
        <el-autocomplete class="inline-input" v-model="updateStudent.school"
          :fetch-suggestions="querySearchSchool"></el-autocomplete>
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-autocomplete class="inline-input" v-model="updateStudent.major"
          :fetch-suggestions="querySearchMajor"></el-autocomplete>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-select v-model="updateStudent.grade" class="filter-item" placeholder="请点击选择">
          <el-option v-for="option in gradeOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="education">
        <el-select v-model="updateStudent.education" class="filter-item" placeholder="请点击选择">
          <el-option v-for="option in educationOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="学习方向" prop="direction">
        <el-select v-model="updateStudent.direction" class="filter-item" placeholder="请点击选择">
          <el-option v-for="option in directionOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号码" prop="id_number">
        <el-input v-model="updateStudent.id_number" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="updateStudent.phone" />
      </el-form-item>
      <el-form-item label="家长姓名" prop="parent">
        <el-input v-model="updateStudent.parent" />
      </el-form-item>
      <el-form-item label="家长联系电话" prop="parent_phone">
        <el-input v-model="updateStudent.parent_phone" />
      </el-form-item>
      <el-form-item label="家庭住址" prop="address">
        <el-input v-model="updateStudent.address" />
      </el-form-item>
      <el-form-item label="QQ号码" prop="qq">
        <el-input v-model="updateStudent.qq" />
      </el-form-item>
      <el-form-item label="所在班级" prop="class">
        <el-select v-model="updateStudent.class" class="filter-item" placeholder="请点击选择">
          <el-option v-for="option in classOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="入学时间" prop="admission_date">
        <el-date-picker v-model="updateStudent.admission_date" type="date" placeholder="请点击选择"
          value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="授课教师" prop="teacher_id">
        <el-select v-model="updateStudent.teacher_id" class="filter-item" placeholder="请点击选择">
          <el-option v-for="option in teacherOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="学管" prop="manager_id">
        <el-select v-model="updateStudent.manager_id" class="filter-item" placeholder="请点击选择">
          <el-option v-for="option in managerOptions" :key="option._id" :label="option.name" :value="option._id" />
        </el-select>
      </el-form-item>

      <el-form-item label="照片" prop="pictures">
        <el-upload :action="baseApi + '/manage/img/upload'" list-type="picture-card" :auto-upload="true" name="image"
          accept="image/*" :file-list="fileList" :on-change="handleChange">
          <el-icon>
            <Plus />
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <el-icon>
                    <Download />
                  </el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="备注" prop="note">
        <Editor v-model="updateStudent.note" :api-key="tiny.apiKey" :init="tiny.init" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="
        updateStudent._id === null
          ? addData(studentFormRef)
          : updateData(studentFormRef)
        ">
        确 定
      </el-button>
    </div>
  </div>

</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { onMounted, ref, reactive, } from 'vue';
/** 仓库引入 */
import useUserStore from '@/store/modules/user';
const userStore = useUserStore()
import useRoleStore from '@/store/modules/role';
const roleStore = useRoleStore()
import useClassStore from '@/store/modules/class';
const classStore = useClassStore()
import useSchoolStore from '@/store/modules/school';
const schoolStore = useSchoolStore()
import useMajorStore from '@/store/modules/major';
const majorStore = useMajorStore()
/** 类型引入 */
import type { userInfoData } from '@/api/user/type';
import type { roleInfoData } from '@/api/role/type';
import type { classInfoData } from '@/api/class/type';
import type { schoolInfoData } from '@/api/school/type';
import type { majorInfoData } from '@/api/major/type';

/** 数据列表定义 */
let roleOptions = ref<roleInfoData[] | undefined>([])
let userOptions = ref<userInfoData[] | undefined>([])
let classOptions = ref<classInfoData[] | undefined>([])
const teacher_role_id = ref<string | undefined>("")
const manager_role_id = ref<string | undefined>("")
const teacherOptions = ref<userInfoData[]>([])
const managerOptions = ref<userInfoData[]>([])
let schoolOptions = ref<schoolInfoData[] | undefined>([])
let majorOptions = ref<majorInfoData[] | undefined>([])
// 查询项类型
interface FilterData {
  _id: string,
  name: string
}
// 性别数据列表
let genderOptions = ref<FilterData[]>([
  { _id: '0', name: '男' },
  { _id: '1', name: '女' },
])
// 年级数据列表
let gradeOptions = ref<FilterData[]>([
  { _id: '1', name: '大一' },
  { _id: '2', name: '大二' },
  { _id: '3', name: '大三' },
  { _id: '4', name: '大四' },
  { _id: '5', name: '在读研究生' },
])
// 学历数据列表
let educationOptions = ref<FilterData[]>([
  { _id: '1', name: '专科' },
  { _id: '2', name: '本科' },
  { _id: '3', name: '硕士' },
  { _id: '4', name: '社会' },
])
// 学习方向数据列表
let directionOptions = ref<FilterData[]>([
  { _id: '1', name: 'web前端' },
  { _id: '2', name: 'Java' },
  { _id: '3', name: 'C/C++' },
  { _id: '4', name: '少儿编程' },
  { _id: '5', name: '产品经理' },
])
/** 过滤 */

/** 数据列表获取 */
// 角色列表
const getRoleList = () => {
  // 仓库是否有数据
  if (roleStore.roles?.length) {
    // 读仓库获取
    roleOptions.value = roleStore.roles
    roleOptions.value?.forEach((item) => {
      if (item.name == "教师") {
        teacher_role_id.value = item._id
      } else if (item.name == "学管") {
        manager_role_id.value = item._id
      }
    })
  } else {
    // 请求获取
    roleStore.roleList().then(() => {
      roleOptions.value = roleStore.roles
      roleOptions.value?.forEach((item) => {
        if (item.name == "教师") {
          teacher_role_id.value = item._id
        } else if (item.name == "学管") {
          manager_role_id.value = item._id
        }
      })
    })
  }
}
// 用户列表
const getUserList = () => {
  if (userStore.users?.length) {
    // 读仓库获取
    userOptions.value = userStore.users
    userOptions.value?.forEach((item) => {
      if (item.role_id == teacher_role_id.value) {
        teacherOptions.value.push(item)
      } else if (item.role_id == manager_role_id.value) {
        managerOptions.value.push(item)
      }
    })
  } else {
    // 请求获取
    userStore.getUserAll().then(() => {
      userOptions.value = userStore.users
      userOptions.value?.forEach((item) => {
        if (item.role_id == teacher_role_id.value) {
          teacherOptions.value.push(item)
        } else if (item.role_id == manager_role_id.value) {
          managerOptions.value.push(item)
        }
      })
    })
  }
}
// 班级列表
const getClassList = () => {
  if (classStore.classes?.length) {
    classOptions.value = classStore.classes
  } else {
    classStore.getClassAll().then(() => {
      classOptions.value = classStore.classes as classInfoData[]
    }).catch()
  }
}
// 学校列表
const getSchoolList = () => {
  if (schoolStore.schools?.length) {
    schoolOptions.value = schoolStore.schools
  } else {
    schoolStore.getSchoolAll().then(() => {
      schoolOptions.value = schoolStore.schools as schoolInfoData[]
    }).catch()
  }
}
// 专业列表
const getMajorList = () => {
  if (majorStore.majors?.length) {
    majorOptions.value = majorStore.majors
  } else {
    majorStore.getMajorAll().then(() => {
      majorOptions.value = majorStore.majors as majorInfoData[]
    }).catch()
  }
}
/** 执行 */
onMounted(() => {
  getRoleList()
  getUserList()
  getClassList()
  getSchoolList()
  getMajorList()
  getStudent()
})
/** 返回 */

const querySearchSchool = (queryString: any, cb: any) => {
  schoolOptions.value.forEach((item) => {
    return (item.value = item.schoolname)
  })
  var results = queryString
    ? schoolOptions.value.filter(createFilter(queryString))
    : schoolOptions.value
  //调用callback返回建议列表的数据
  cb(results)
}

const querySearchMajor = (queryString: string, cb: any) => {
  majorOptions.value.forEach((item) => {
    return (item.value = item.majorname)
  })
  var results = queryString
    ? majorOptions.value.filter(createFilter(queryString))
    : majorOptions.value
  //调用callback返回建议列表的数据
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: any) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
// 更新/添加学员数据对象
const updateStudent = ref({
  _id: null,
  name: '', //姓名
  gender: '', //性别
  school: '', //学校
  major: '', //专业
  grade: '', //年级
  education: '', //学历
  direction: '', //学习方向
  id_number: '', //身份号码
  phone: '', //电话号码
  parent: '', //家长姓名
  parent_phone: '', //家长联系电话
  address: '', //家庭住址
  qq: '', //QQ号码
  class: '', //所在班级
  admission_date: '', //入学时间
  teacher_id: '', //教师id
  manager_id: '', //学管id
  pictures: '', //照片数组
  note: '', //备注信息
})

/** 图片添加 */
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile, UploadFile } from 'element-plus';
const baseUrl = import.meta.env.VITE_APP_SERVICE_URL
const baseApi = import.meta.env.VITE_APP_BASE_API
//引入axios删除图片
import request from "@/utils/request"
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const fileList = ref<UploadUserFile[]>([])
// 文件变动钩子(上传、添加)
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  if (uploadFile.status == "success") {
    const result = uploadFile.response;
    //@ts-ignore
    if (result.status == 0) {
      //@ts-ignore
      const { name, url } = result.data;
      uploadFile = uploadFiles[uploadFiles.length - 1];
      uploadFile.name = name;
      uploadFile.url = url;
    }
  }
  fileList.value = uploadFiles
}
//获取所有以上传图片名称数组
const getImgs = () => {
  return fileList.value.map((item) => item.name)
}
// 删除
const handleRemove = (file: UploadFile) => {
  request.post<any, any>('/manage/img/delete', { name: file.name }).then(response => {
    if (response.status == 0) {
      fileList.value.splice(fileList.value.indexOf(file), 1);
    }
  })
}
// 放大显示
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
// 下载
const handleDownload = (file: UploadFile) => { }

/** 富文本框 */
import Editor from "@tinymce/tinymce-vue"
const tiny = reactive({
  apiKey: "q7qxpnj1slw0num8nr0ou2h15mtfp0u6zsebtnpcgxcu7g4z",
  init: {
    toolbar_mode: 'sliding',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate ai mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
      { value: 'First.Name', title: 'First Name' },
      { value: 'Email', title: 'Email' },
    ],
    ai_request: (_request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
  },
});

/** 校验规则 */
// 手机号输入校验
const validatePhone = (rule: any, value: any, callback: any) => {
  value = value.trim()
  const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  if (value === "") {
    callback(new Error('请输入手机号码'))
  }
  else if (!phoneReg.test(value)) {
    callback(new Error('请输入正确的手机号码'))
  }
  else {
    callback()
  }
}
//身份证校验
const validateIdNumber = (rule: any, value: any, callback: any) => {
  value = value.trim()
  const _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  const _IDRe15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
  if (_IDRe18.test(value) || _IDRe15.test(value)) {
    callback()
  } else {
    callback(new Error("请输入正确的身份证号码"))
  }
}
const studentFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
  direction: [{ required: true, message: "请选择学习方向", trigger: "blur" }],
  id_number: [{ validator: validateIdNumber, trigger: ["blur", "change"] }],
  phone: [{ validator: validatePhone, trigger: ["blur", "change"] }],
  class: [{ required: true, message: "请选择班级", trigger: "blur" }],
  admission_date: [{ required: true, message: "请选择入学时间", trigger: "blur" }],
  teacher_id: [{ required: true, message: "请选择任课教师", trigger: "blur" }],
  manager_id: [{ required: true, message: "请选择学管", trigger: "blur" }]
})
/** 表单提交 */
import { useRouter, useRoute } from 'vue-router';
const $router = useRouter()
const $route = useRoute()
import useStudentStore from '@/store/modules/student';
import { studentInfoData } from '@/api/student/type';
let studentStore = useStudentStore()
// 添加
const addData = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      updateStudent.value.pictures = getImgs();
      studentStore.addStudent((updateStudent.value as studentInfoData)).then(response => {
        $router.replace("/student")
      })
    } else {
      return false
    }
  })
}
const getStudent = () => {
  const { _id } = $route.params
  if (_id != "-1") {
    studentStore.getStudentById(_id as string).then(response => {
      updateStudent.value = response as studentInfoData
      const { pictures } = response as studentInfoData
      if (pictures && pictures.length != 0) {
        fileList.value = pictures.map(item => ({
          name: item,
          url: baseApi + '/upload' + item
        }))
      }
    })
  }
}


</script>
<style>
.student-update {
  width: 40%;
  margin: 0 auto;
}
</style>